<!DOCTYPE html>
<html lang="en" id="htmlRoot">
    <head>
        <meta charset="UTF-8" />
        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="pragram" content="no-cache" />
        <meta
            http-equiv="cache-control"
            content="no-cache, no-store, must-revalidate"
        />
        <script src="./lib/Cesium/Cesium.js"></script>
        <link rel="stylesheet" href="./lib/Cesium/Widgets/widgets.css" />
        <link href="./lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
        <script src="./lib/mars3d/mars3d.js" type="text/javascript"></script>
        <meta http-equiv="expires" content="0" />
        <meta name="referrer" content="no-referrer" />
        <title>Vite + Vue</title>
        <style>
            #browser-tip {
                display: none;
            }
            #browser-tip a {
                margin-right: 10px;
            }

            /* 首屏加载 */
            #loader-wrapper {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                /* background-color: rgb(16, 16, 20); */
            }
            #loader-wrapper-container {
                display: inline-block;
                width: 24px;
                height: 24px;
                position: relative;
                animation: loader-rotate 0.8s linear infinite;
            }

            #loader-wrapper-container i {
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: rgba(50, 105, 255, 1);
                position: absolute;
            }
            #loader-wrapper-container i::after {
                content: "";
                position: absolute;
                width: 50%;
                height: 50%;
                background: rgba(50, 105, 255, 1);
                border-radius: 1px;
            }
            #loader-wrapper-container i:nth-child(1) {
                top: 0;
                left: 0;
            }
            #loader-wrapper-container i:nth-child(1)::after {
                right: 0;
                bottom: 0;
            }
            #loader-wrapper-container i:nth-child(2) {
                top: 0;
                right: 0;
                opacity: 0.8;
            }
            #loader-wrapper-container i:nth-child(2)::after {
                left: 0;
                bottom: 0;
            }
            #loader-wrapper-container i:nth-child(3) {
                bottom: 0;
                left: 0;
                opacity: 0.5;
            }
            #loader-wrapper-container i:nth-child(3)::after {
                right: 0;
                top: 0;
            }
            #loader-wrapper-container i:nth-child(4) {
                bottom: 0;
                right: 0;
                opacity: 0.3;
            }
            #loader-wrapper-container i:nth-child(4)::after {
                left: 0;
                top: 0;
            }
            #loader-wrapper-title {
                font-size: 13px;
                margin-top: 12px;
                color: #333;
            }
            @keyframes loader-rotate {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="loader-wrapper">
                <div id="loader-wrapper-container">
                    <i class="item0"></i>
                    <i class="item0"></i>
                    <i class="item0"></i>
                    <i class="item0"></i>
                </div>
                <div id="loader-wrapper-title">系统加载中...</div>
            </div>
        </div>
        <div id="browser-tip">
            <p>您的浏览器版本过低，请升级浏览器</p>
        </div>
        <script type="module" src="/src/main.js"></script>
        <script type="text/javascript">
            function getBrowserInfo() {
                var Sys = {};
                var ua = navigator.userAgent.toLowerCase();
                var re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
                var m = ua.match(re);
                Sys.browser = m[1].replace(/version/, "'safari");
                Sys.ver = m[2];

                //谷歌浏览器 49.x以下版本
                if (Sys.browser === "chrome" && m[2].split(".")[0] * 1 < 49) {
                    var _dom = document.getElementById("browser-tip");
                    _dom.style.display = "block";
                    var _app = document.getElementById("app");
                    _app.style.display = "none";
                }
                return Sys;
            }
            //获取当前的浏览器信息
            var sys = getBrowserInfo();
            //sys.browser得到浏览器的类型，sys.ver得到浏览器的版本
            // console.log("你的浏览器是：" + sys.browser + " " + sys.ver);
        </script>
    </body>
</html>
